<template>
  <div>
    <Form v-if="showSearch" ref="searchForm" :model="searchForm" @submit.native.prevent>
      <Row :gutter="8">
        <Col span="6" style="margin-bottom: 10px">
          <Jdd-Input v-model="searchForm.appName" :placeholder="'应用名'" />
        </Col>
        <Col span="6">
          <Jdd-BtnSearch :form="'searchForm'" @click="searchApps"></Jdd-BtnSearch>
          <Jdd-BtnDefault type="primary"  @click="toCreateApp">添加应用</Jdd-BtnDefault>
        </Col>
      </Row>
    </Form>
    <Jdd-TablePage ref="table" v-bind="jddTable" size="small">
      <template slot-scope="params" slot="action">
        <Jdd-BtnUpdate icon :beforeClick="()=>toUpdate(params.row)" disabled title="修改信息"></Jdd-BtnUpdate>
        <Jdd-BtnDelete icon @click="(bool,Proxy) => bool && toDelete(Proxy,params.row.id)"></Jdd-BtnDelete>
        <Jdd-BtnUpdate
          :icon="params.row.status === 1?'icon-start':'icon-stop'"
          @click="(bool,Proxy) => bool && toActive(Proxy,params.row.id)"
          :title="params.row.status === 1?'开启':'关闭'"
        ></Jdd-BtnUpdate>
      </template>
    </Jdd-TablePage>
  </div>
</template>

<script>
import { appList } from '../../scripts/api'
export default {
  name: 'appList',
  props: {
    showSearch: {
      type: Boolean,
      default: true
    },
    app: {
      type: String
    }
  },
  data () {
    return {
      loading: false,
      searchForm: {
        appName: ''
      },
      jddTable: {
        tColumns: [
          {
            title: '应用名称',
            sortable: 'app_name',
            key: 'appName',
            align: 'center',
            minWidth: 30
          },

          {
            title: 'js错误总数',
            key: 'jsErrorTotal',
            sortable: 'js_error_total',
            extendFormat: 'number',
            align: 'center',
            minWidth: 20,
            click: params => {
              console.debug(params.row.appName)
            }
          },
          {
            title: '页面调用量',
            key: 'pageTotal',
            sortable: 'page_total',
            extendFormat: 'number',
            minWidth: 20,
            align: 'center',
            click: params => {
              console.debug(params.row.appName)
            }
          },
          {
            title: '页面完全加载时间(ms)',
            key: 'pageCostAvg',
            sortable: 'page_cost_avg',
            extendFormat: 'number',
            minWidth: 80,
            align: 'center',
            click: params => {
              console.debug(params.row.appName)
            }
          },
          {
            title: 'api调用量',
            key: 'apiTotal',
            sortable: 'api_total',
            extendFormat: 'number',
            minWidth: 60,
            align: 'center',
            click: params => {
              console.debug(params.row.appName)
            }
          },
          {
            title: 'api平均耗时(ms)',
            key: 'apiCostAvg',
            sortable: 'api_cost_avg',
            extendFormat: 'number',
            minWidth: 80,
            align: 'center',
            click: params => {
              console.debug(params.row.appName)
            }
          },
          {
            title: '创建时间',
            key: 'created_date',
            sortable: 'custom',
            width: 150,
            align: 'center',
            extendFormat: 'date'
          },
          {
            title: '更新时间',
            key: 'modified_date',
            sortable: 'custom',
            width: 150,
            align: 'center',
            extendFormat: 'date'
          },
          {
            title: '操作',
            key: 'icon',
            extendFormat: 'operation',
            width: 100,
            align: 'center',
            slot: 'action'
          }
        ],
        tData: pageParam => {
          return appList({
            params: Object.assign(pageParam, {
              appName: this.searchForm.appName || this.app
            })
          })
        }
      }
    }
  },

  methods: {
    toUpdate (search) {},
    toDelete (id) {},
    toActive (proxy, id, status) {

    },
    toCreateApp () {},
    searchApps () {}
  }
}
</script>
